import { TabBar } from "antd-mobile";
import React from "react";
import { Route } from "react-router-dom";
import Index from "../Index/index";
import Rent from "../Rent/index";
import News from "../News/index";
import Profile from "../Profile/index";
export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // selectedTab: "redTab",
      // hidden: false,
      // fullScreen: false,
    };
  }

  render() {
    let {
      location: { pathname },
    } = this.props;
    let navs = [
      { titel: '首页', icon: ' icon-ind', path: "/home" },
      { titel: '找房', icon: ' icon-findHouse', path: "/home/rent" },
      { titel: '资讯', icon: ' icon-infom', path: "/home/news" },
      { titel: '我的', icon: ' icon-myinfo', path: "/home/userInfo" }
    ]
    return (
      <div className="home" >
        {/* 嵌套路由 */}
        <Route exact path="/home" component={Index}></Route>
        <Route path="/home/rent" component={Rent}></Route>
        <Route path="/home/news" component={News}></Route>
        <Route path="/home/userInfo" component={Profile}></Route>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#00c278"
          barTintColor="white"
          hidden={this.state.hidden}
        >{navs.map((item) => {
          return <TabBar.Item
            title={item.titel}
            key={item.path}
            icon={<i className={`iconfont ${item.icon}`}></i>}
            selectedIcon={<i className={`iconfont ${item.icon}`}></i>}
            selected={pathname === item.path}
            onPress={() => {
              //点击事件
              this.props.history.push(item.path);
            }}
            data-seed="logId"
          />
        })}

        </TabBar>
      </div>
    );
  }
}
